<template>
	<div id="mainPage">
		<el-row>
			<my-header></my-header>
		</el-row>
		<div style="height:100%" class="content">
			<div class="aside">
				<img src="../../../static/img/login.jpg" @click="goUserinfo"/>
				<div class="number">用户名：<span v-text="username"></span></div>
				<div class="runing" @userStatus='checkStatus'><i class="el-icon-time"></i><span v-text="status"></span></div>
				<my-nav></my-nav>
				<div class="a_box">
					<a href="../../../static/全宇支付接口.zip" download>开发文档下载</a>
					<div>当前IP：<span v-text="ip"></span></div>
					<div>上次登录时间:<span v-text="dateLast"></span></div>
				</div>
			</div>
			<div class="view">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import dateformat from 'dateformat'
	import header from './header'
	import nav from './nav'
	export default {
		data() {
			return {
				username: '',
				status: '正常运行中',
				dateLast:'',
				ip:''
			}
		},
		created() {
			this.getDateLast();
			this.username = sessionStorage.getItem("username");
			  this.ip = sessionStorage.getItem("ip");
		},
		methods: {
			checkStatus(mes) {
				console.log(mes)
				if(mes == 'success') {
					this.status = '正常运行中'
				}
				if(mes == 'error') {
					this.status = '获取用户信息失败'
				}
			},
			goUserinfo(){
				this.$router.push('/user/userInfo')
			},
			getDateLast(){
				this.$api.getLoginLogLast().then( res =>{
					if(res.data.code == '000000'){
						console.log(res.data)
						this.dateLast = res.data.data.createTime;
							let date = new Date(this.dateLast);
						this.dateLast  = dateformat(date,'yyyy-mm-dd HH:MM')

					}else{
						this.$message.error("获取上次登录时间失败")
					}
				}).catch(() =>{

					this.$message.error("获取上次登录时间失败")
				})
			}
		},
		components: {
			"my-header": header,
			"my-nav": nav
		}
	}
</script>

<style lang="less">
	#mainPage {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		flex-direction: column;
		.content {
			overflow-y: hidden;
			display: flex;
			.aside{
				height: 100%;
				background-color: #1F2D3D;
				display: flex;
				flex-direction: column;
				width: 200px;
				position:relative;
				overflow-y: auto;
        padding-bottom: 60px;
				.a_box{
					color:white;
					/*position:absolute;*/
					bottom:8%;
					left:0;
					right:0;
					font-size:10px;
					margin:auto;
					a{
						background-color:white;
						color:black;
						display:inline-block;
						margin-bottom:30px;
						display: inline-block;
						padding: 5px 10px;
						border-radius: 2px;
						font-size: 12px;
						   -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.75);

					}
					div{
						font-size: 12px;
						  -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.90);
					}
				}

				img {
					width: 45px;
					height: 45px;
					border-radius: 50%;
					margin-top: 40px;
					align-self: center;
				}
				.number {
					align-self: center;
					color: black;
					background-color: #20A0FF;
					margin: 10px;
					font-size: 12px;
					padding: 2px;
					color: white;
					border-radius: 4px;
				}
				.runing {
					align-self: center;
					color: white;
					background-color: #20A0FF;
					margin-bottom: 20px;
					font-size: 12px;
					padding: 2px;
					border-radius: 4px;
				}
			}
			.view {
				flex: 1;
				background-color: #F3F3F4;

			}
		}
	}
</style>
